---
title: "Mobility distrubtion among countries (origin), fields and Genders"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
theme: spacelab
source_code: embed
fontsize: 16pt
---
```{r setup}
library(knitr)
library(kableExtra)
library(flexdashboard)
library(WDI)
library(tidyverse)
library(plotly)
library(crosstalk)
library(ggthemes)
library(DT)
library(scales)
library(reactable)
library(lubridate)
library(hrbrthemes)
library(htmltools)
library(sparkline)
library(dplyr)
myfont="Times New Roman"
knitr::opts_chunk$set(echo = FALSE)
origin_country_distrubtion_all<-read.table("data_country.csv",header=TRUE,sep=";",quote="\r",dec = ".")
htmltools::browsable(
tagList(
div(
div(tags$label("Filter based on field", `for` = "MAIN_FIELD-filter")),
tags$select(
id = "MAIN_FIELD-filter",
onchange = "Reactable.setFilter('field-filter-table', 'MAIN_FIELD', this.value)",
lapply(unique(origin_country_distrubtion_all$MAIN_FIELD), tags$option)
)
),
tags$hr("aria-hidden" = "false"),
reactable(
origin_country_distrubtion_all,elementId = "field-filter-table",
columns = list(
MAIN_FIELD = colDef(show = FALSE),
ORIGIN_COUNTRY =colDef(name="origin country"),
ntotal = colDef(name = "#total researchers",format = colFormat( separators = TRUE)),
n_men = colDef(name = "#total male researchers",format = colFormat( separators = TRUE)),
n_women = colDef(name = "#total female researchers",format = colFormat( separators = TRUE)),
womenTomenmobile= colDef(name="proportion of female to male mobile researchers"),
mobile_percent = colDef( name = "mobility percentage",
cell = function(value){
width <- paste0(value*100, "%")
value <- format(value, big.mark = ",")
value <- format(value, width = 10, justify = "right")
bar <- div(style = list(background = "#00bfc4", width = width, height = "16px"))
chart <- div(style = list(flexGrow = 1, marginLeft = "8px", background = "#e1e1e1"), bar)
div(style = list(display = "flex", alignItems = "center"),span(class = "number", width), chart)
},format = colFormat(percent = TRUE, digits = 1))
),defaultPageSize = 250,showPageSizeOptions = TRUE,
pageSizeOptions = c(4, 8, 12)
)
)
)
```
```{css}
.bar-cell {
display: flex;
align-items: center;
}
.number {
font-size: 13.5px;
white-space: pre;
}
.bar-chart {
flex-grow: 1;
margin-left: 6px;
height: 22px;
}
.bar {
height: 100%;
}
```